import React from 'react';
import { Breadcrumb } from 'antd';
import { Daily } from 'views/work/daily';
import { AddDaily } from 'views/work/daily/addDaily';

const BreadItem = Breadcrumb.Item;

export default class ContentMiddle extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            breadList: [],
            current: ''// 当前组件
        };
        this.routes = {
            daily: '日志',
            addDaily: '新增日志'
        };
    }

    componentDidMount() {
        this.setState({ current: this.props.comp });
    }

    componentWillReceiveProps(nextProps) {
        let { comp } = nextProps,
            breadList = [{ src: comp, text: this.routes[comp] }];
        this.setState({ breadList, current: comp });
    }

    changeBread(bread) { // 点击面包屑
        if (bread !== this.state.current) {
            let { breadList } = this.state;
            for (let i = 0, len = breadList.length; i < len; i++) {
                if (breadList[i].src === bread) {
                    breadList.splice(i + 1, len - i - 1);
                    break;
                }
            }
            this.setState({ current: bread });
        }
    }

    addBread(comp) { // 添加面包屑
        let { breadList } = this.state;
        breadList.push({ src: comp, text: this.routes[comp] });
        this.setState({ breadList, current: comp });
    }

    renderComp() { // 渲染页面组件
        let { current } = this.state;
        switch (current) {
            case 'daily':
                return <Daily addBread={(e) => this.addBread(e)} />;
            case 'addDaily':
                return <AddDaily />
            default:
                return '暂无内容，敬请期待！';
        }
    }

    render() {
        let { breadList } = this.state;
        return (
            <div className="pd10">
                {breadList.length > 0 && (
                    <div className="bb1 pb5">
                        <Breadcrumb separator=">">
                            {breadList.map((item) => (
                                <BreadItem key={item.src} onClick={() => this.changeBread(item.src)}>
                                    {item.text}
                                </BreadItem>
                            ))}
                        </Breadcrumb>
                    </div>
                )}
                <div>{this.renderComp()}</div>
            </div>
        )
    }
}
export { ContentMiddle };